<template>
  <div>
    <h2 ref="title">{{ info.name }}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";

export default {
  setup() {
    // 定义可响应式对象
    const info = reactive({ name: "why", age: 18 });
    const name = ref("why");

    // 侦听器watch
    watch([info, name], ([newInfo, newName], [oldInfo, oldName]) => {
      console.log("newInfo: " + newInfo, "oldInfo: " + oldInfo);
      console.log("newName: " + newName, "oldName: " + oldName);
    });

    const changeData = () => {
      info.name = "coderwhy";
    };

    return { info, changeData };
  },
};
</script>

<style scoped></style>
